<template>
  <div class="all">
    <div class="user-messages">
      <!-- <div class="user">
        <img class="userimg" src="../../static/images/userimg.png" />
        <div class="usermessages">
          <div>盛心阳光管理员</div>
          <div class="usermessages-support">服务技术支持部</div>
          <div>到期时间：2099-9-19</div>
        </div>
      </div> -->
      <div class="record">
        <div class="record-test">
          <div class="record-test-number">6890</div>
          <div>员工总数</div>
        </div>
        <div class="record-test">
          <div class="record-test-number">18923</div>
          <div>总测人次</div>
        </div>
        <div class="record-test">
          <div class="record-test-number">12</div>
          <div>总测项目</div>
        </div>
        <div class="record-test">
          <div class="record-test-number">0</div>
          <div>阳性筛选</div>
        </div>
      </div>
    </div>

    <div class="echats">
      <div class="boxgg">
        <div class="echats-box" style="margin-top: -14px">
          <div class="echats-title">
            心理健康年度趋势
            <router-link to="/board/monthly">
              <div
                class="ggas"
                style="
                  float: right;
                  color: rgb(59, 182, 254);
                  margin-right: 10px;
                "
              >
                查看更多
                <ChevronRightCircleIcon
                  color="#3BB6FE"
                  style="margin-bottom: 2px"
                />
              </div>
            </router-link>
          </div>
          <div class="echats-item">
            <div id="chart_7"></div>
          </div>
          <div class="baitiao"></div>
        </div>

        <div class="echats-box" style="margin-top: -14px">
          <div class="echats-title">阳性筛出年度趋势</div>
          <div class="echats-item">
            <div id="chart_8"></div>
          </div>
          <div class="baitiao"></div>
        </div>
      </div>

      <div class="boxgg">
        <div class="echats-box">
          <div class="echats-title">测评项目主题分布</div>
          <div class="echats-item">
            <div id="chart_9"></div>
          </div>
          <div class="baitiao"></div>
        </div>
        <div class="echats-box">
          <div class="echats-title">测评参与分支比例</div>
          <div class="echats-item">
            <div id="chart_10"></div>
          </div>
          <div class="baitiao"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, ref, onUnmounted, onActivated, onDeactivated } from "vue";
import {
  chart_7,
  chart_8,
  chart_9,
  chart_10,
  chart_11,
} from "../../echats/Current";
import * as echarts from "echarts";
import { ChevronRightCircleIcon } from "tdesign-icons-vue-next";
import {
  getGhqData,
  getYXData,
  getThemeNum,
  getSubcomsnumData,
} from "../../api/eachartsaApi.js";
export default {
  components: { ChevronRightCircleIcon },
  setup(props) {
    let Echart_7 = ref(null);
    let Echart_9 = ref(null);
    let Echart_8 = ref(null);
    let Echart_10 = ref(null);
    let breakoff = ref(false);
    //心李健康
    const api1 = async () => {
      const res = await getGhqData();
      Echart_7 = echarts.init(document.getElementById("chart_7"));
      let casobj = {
        ye: [],
        jl: [],
        zw: [],
        zh: [],
        yy: [],
      };
      res.data.forEach((item) => {
        casobj.ye.push(item.years);
        casobj.jl.push(item.jlnum);
        casobj.zw.push(item.selfnum);
        casobj.zh.push(item.snum);
        casobj.yy.push(item.yunum);
      });
      const casdata = chart_7(echarts);
      casdata.xAxis.data = casobj.ye;
      casdata.series[0].data = casobj.zh;
      casdata.series[1].data = casobj.zw;
      casdata.series[2].data = casobj.yy;
      casdata.series[3].data = casobj.jl;
      Echart_7.setOption(casdata);
    };
    //阳性晒出
    const api2 = async () => {
      const res = await getYXData();
      Echart_8 = echarts.init(document.getElementById("chart_8"));
      let casobj = {
        ye: [],
        qd: [],
        zd: [],
        zc: [],
      };
      res.data.forEach((item) => {
        casobj.ye.push(item.years);
        casobj.qd.push(item.qdnum);
        casobj.zd.push(item.zdnum);
        casobj.zc.push(item.zcnum);
      });
      const casdata = chart_10(echarts);
      casdata.xAxis[0].data = casobj.ye;
      casdata.series[0].data = casobj.zc;
      casdata.series[1].data = casobj.qd;
      casdata.series[2].data = casobj.zd;
      Echart_8.setOption(casdata);
    };
    //测评项目
    const api3 = async () => {
      var now = new Date();
      var year = now.getFullYear();
      year = year.toString();
      const res = await getThemeNum({ years: year });
      Echart_9 = echarts.init(document.getElementById("chart_9"));
      let casobj = {
        x: [],
        y: [],
      };
      res.data.forEach((item) => {
        casobj.x.push(item.theme);
        casobj.y.push(item.themeNum);
      });
      const casdata = chart_8(echarts);
      casdata.xAxis.data = casobj.x;
      casdata.series[0].data = casobj.y;
      Echart_9.setOption(casdata);
    };
    //测评参与
    const api4 = async () => {
      const res = await getSubcomsnumData();
      Echart_10 = echarts.init(document.getElementById("chart_10"));
      let casobj = {
        x: [],
        y: [],
      };
      res.data.forEach((item) => {
        if (item.orgName === "其他") {
          casobj.y.push("客服部");
          casobj.x.push({ name: "客服部", value: Number(item.snum) });
          return;
        }
        casobj.x.push({ name: item.orgName, value: Number(item.snum) });
        casobj.y.push(item.orgName);
      });
      const casdata = chart_11(echarts);
      casdata.legend.data = casobj.y;
      casdata.series[0].data = casobj.x;
      Echart_10.setOption(casdata);
    };
    onMounted(() => {
      api1();
      api2();
      api3();
      api4();
      breakoff.value = true;
    });
    onActivated(() => {
      //缓存页面再启动函数
      if (breakoff.value !== true) {
        api1();
        api2();
        api3();
        api4();
      }
    });
    onUnmounted(() => {
      if (Echart_7.value !== null) {
        Echart_7.dispose();
      }
      if (Echart_8.value !== null) {
        Echart_8.dispose();
      }
      if (Echart_9.value !== null) {
        Echart_9.dispose();
      }
      if (Echart_10.value !== null) {
        Echart_10.dispose();
      }
    });
  },
};
</script>
<style lang="scss" scoped>
.all {
  width: 100%;
}
.user-messages {
  background-color: #fff;
  height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 0px 80px 0 50px;
  .usermessages-support {
    color: rgb(153, 153, 153);
  }
  .user {
    width: 300px;
    display: flex;
    align-items: center;
    .userimg {
      width: 80px;
      margin: 0 5px;
      border-radius: 50px;
    }
  }
  .record {
    display: flex;
    justify-content: space-around;
    width: 100%;
    text-align: center;
    line-height: 40px;
    .record-test {
      height: 100%;
      .record-test-number {
        font-size: 30px;
        color: rgb(59, 182, 254);
        font-weight: 600;
      }
    }
  }
}
.echats {
  width: 100%;
  background-color: rgb(241, 245, 248);
  padding: 0 0 40px 10px;
  // flex-wrap: wrap;
  // align-content: flex-start;
  .echats-item {
    flex: none;
    width: 100%;
    height: 375px;
    border-radius: 10px;
    background: rgb(247, 247, 247);
    div {
      width: 100%;
      height: 100%;
    }
  }
  .item-w100 {
    width: calc(100% - 230px);
  }
  .echats-box {
    width: 49.5%;
    height: 100%;
    position: relative;
    .echats-title {
      padding: 0 5px;
      position: relative;
      top: 25px;
      line-height: 3;
      left: auto;
      z-index: 999;
      text-indent: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      background: #fff;
    }
  }
}
.boxgg {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.baitiao {
  position: absolute;
  width: 100%;
  height: 11px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  left: 0;
  bottom: -7px;
}
</style>
